<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="id号" prop="userId">
        <el-input
          v-model="queryParams.userId"
          placeholder="请输入id号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="员工名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入员工名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工号" prop="empNumber">
        <el-input
          v-model="queryParams.empNumber"
          placeholder="请输入工号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="身份证" prop="idCard">
        <el-input
          v-model="queryParams.idCard"
          placeholder="请输入身份证"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 员工的展示列表 -->
    <el-table v-loading="loading" :data="epmlist">
      <el-table-column label="id号" align="center" prop="userId" />
      <el-table-column label="员工名称" align="center" prop="name" />
      <el-table-column label="工号" align="center" prop="empNumber" />
      <el-table-column label="身份证" align="center" prop="idCard" />

      <!-- 显示员工的历史信息 -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleClick(scope.row)"
            v-hasPermi="['Empment:histroy:query']"
          >查看历史信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 展示员工历史信息的对话框 -->
    <el-dialog title="员工历史信息" :visible.sync="historyDialogVisible" width="50%">
      <el-table :data="historyList" style="width: 100%" v-loading="loading">
        <el-table-column prop="operationTime" align="center" label="操作时间" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.operationStatus === 1">进行了入职操作</span>
            <span v-else-if="scope.row.operationStatus === 2">进行了离职操作</span>
            <span v-else-if="scope.row.operationStatus === 3">
             基本信息修改为：<br />
              工号：{{scope.row.empNumber}}
              部门：{{scope.row.deptName}}
              用户性别：{{scope.row.sex}}<br />
              身份证：{{scope.row.idCard}}
              身份证号地域：{{scope.row.idNumberRegion}}
              手机号码：{{scope.row.phoneNumber}}<br />
              地域：{{scope.row.region}}
              合同签订时间：{{scope.row.contractDate}}
              合同截至日期：{{scope.row.contractLong}}<br />
              入职时间：{{scope.row.date}}
              入职类型：{{scope.row.typeOfEmployment}}
              人员类型：{{scope.row.typeOfMen}}<br />
              婚姻状态：{{scope.row.maritalStatus}}
              政治面貌：{{scope.row.politicalLandscape}}
              住址：{{scope.row.address}}<br />
              最高学历：{{scope.row.highEducationalLevel}}
              毕业学校：{{scope.row.school}}
                学制类型：{{scope.row.typeEducation}}<br />
              专业：{{scope.row.major}}<br />
              民族：{{scope.row.nation}}
              紧急联系人：{{scope.row.emergencyContact}}
              紧急联系人电话：{{scope.row.emergencyContactPhone}}<br />
<!--              第一学历：{{scope.row.firstDegree}}-->
<!--              第二学历：{{scope.row.secondDegree}}-->
              开户行：{{scope.row.bank}}
              银行账号：{{scope.row.bankAccountNumber}}
              爱好特长：{{scope.row.hobby}}<br />
              是否安排寝室：{{scope.row.dormitoryNeed}}
              寝室号：{{scope.row.dormitory}}
              出生年月：{{scope.row.birthday}}<br />
              其他：{{scope.row.other}}
              预留字段1：{{scope.row.Reserved1}}
              预留字段2：{{scope.row.Reserved2}}<br />
              预留字段3：{{scope.row.Reserved3}}
              预留字段4：{{scope.row.Reserved4}}
              预留字段5：{{scope.row.Reserved5}}<br />
              预留字段6：{{scope.row.Reserved6}}
              预留字段7：{{scope.row.Reserved7}}
              预留字段8：{{scope.row.Reserved8}}
            </span>
            <span v-else-if="scope.row.operationStatus === 4">部门更改为： {{ scope.row.deptName }}</span>
            <span v-else-if="scope.row.operationStatus === 5">修改了岗位信息： {{ scope.row.postName }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
      v-show="total_history > 0"
      :total="total_history"
      :page.sync="queryParamshistory.pageNum"
      :limit.sync="queryParamshistory.pageSize"
      @pagination="handleClickpage"
    />
    </el-dialog>

  </div>
</template>

<script>
import { listHistory, getHistory } from "@/api/Empment/history";

export default {
  //todo 基本信息的修改展示不直观，需要调整
  name: "History",
  data() {
    return {
      loading: true,
      epmlist: [],
      historyList: [],
      total: 0,
      total_history: 0,
      showSearch: true,
      historyDialogVisible: false,
      userid:null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        name: null,
        empNumber: null,
        idCard: null
      },
      queryParamshistory: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        name: null,
        empNumber: null,
        idCard: null
      },
      form: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询员工列表 */
    getList() {
      this.loading = true;
      listHistory(this.queryParams).then(response => {
        this.epmlist = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查看历史信息按钮 */
    handleClick(row) {
      this.userId = row.userId;
      this.loading = true;
      getHistory(this.userId,this.queryParamshistory).then(response => {
        this.historyList = response.rows;
        this.total_history = response.total;
        this.loading = false;
        this.historyDialogVisible = true;
      });
    },
    /** 查看历史信息按钮翻页 */
    handleClickpage() {
      this.loading = true;
      getHistory(this.userId,this.queryParamshistory).then(response => {
        this.historyList = response.rows;
        this.total_history = response.total;
        this.loading = false;
        this.historyDialogVisible = true;
      });
    },


    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    }
  }
};
</script>

<style>
.app-container {
  padding: 20px;
}
</style>
